<template>
  <div class="account-box pd-lf-112 fx-full wd-0">
    <div class="cr-bk-9 ft-24 fw-600 mg-bt-48">{{ $t("login.title") }}</div>
    <el-form class="mg-bt--6" :model="loginForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="username" class="mg-bt-24">
        <el-input
          :placeholder="$t('login.placeUsername')"
          prefix-icon="el-icon-user"
          autocomplete="new-password"
          v-model="loginForm.username"
          @keyup.enter.native="loginHandle"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          :placeholder="$t('login.placePassword')"
          autocomplete="new-password"
          prefix-icon="el-icon-lock"
          v-model="loginForm.password"
          :show-password="isShowPassWord"
          @keyup.enter.native="loginHandle"
        >
          <i
            slot="suffix"
            class="el-input__icon custom-icon"
            :class="isShowPassWord ? 'isHide' : 'isShow'"
            @click="isShowPassWord = !isShowPassWord"
          ></i>
        </el-input>
      </el-form-item>
    </el-form>
    <el-checkbox v-model="isRemember">{{ $t("login.remember") }}</el-checkbox>
    <div
      class="login-btn fx-ct-ct bg-pm cr-wt-10 bd-rd-4 ht-44 mg-tp-48 mg-bt-12 cs-pt"
      @click="preLoginHandle"
    >
      {{ $t("login.btn") }}
    </div>
    <div class="ft-14 cs-pt cr-pm" @click="jumpHandle">忘记密码?</div>
    <!-- 图形验证码 -->
    <Verify
      ref="verify"
      :captcha-type="'blockPuzzle'"
      :img-size="{ width: '400px', height: '200px' }"
      @success="loginHandle"
    />
  </div>
</template>

<script>
import base64 from "base-64";
import { mapGetters } from "vuex";
import Verify from "@/components/Verifition/Verify";
// import { getTenantIdByName } from "@/api/user/user.js";
export default {
  name: "AccountBox",
  components: { Verify },
  data() {
    return {
      isShowPassWord: true,
      isRemember: false,
      loginForm: {
        username: "admin",
        password: "admin123",
        captchaVerification: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: this.$t("login.placeUsername"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("login.placePassword"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["account", "password"]),
  },
  methods: {
    preLoginHandle() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        this.$refs.verify.show();
      });
    },
    loginHandle(val) {
      console.log(val, ">>>>>>>>>>.");
      this.loginForm.captchaVerification = val.captchaVerification;
      this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
        this.$message({
          message: this.$t("login.success"),
          type: "success",
          duration: 1500,
        });
        let account = this.isRemember ? this.loginForm.username : "";
        let password = this.isRemember
          ? base64.encode(this.loginForm.password)
          : "";
        this.$store.commit("SET_ACCOUNT", account);
        this.$store.commit("SET_PASSWORD", password);
        this.$router.push({ path: this.$website.firstPage.value });
      });
    },
    jumpHandle() {
      this.$router.push("/reset");
    },
  },
  created() {
    // 租户开关
    // this.tenantEnable = getTenantEnable();
    // getTenantIdByName("芋道源码").then((res) => {
    //   // 设置租户
    //   const tenantId = res.data;
    //   if (tenantId && tenantId >= 0) {
    //     // setTenantId(tenantId);
    //   }
    // });
    // // 验证码开关
    // this.captchaEnable = getCaptchaEnable();
    // // 重定向地址
    // this.redirect = this.$route.query.redirect
    //   ? decodeURIComponent(this.$route.query.redirect)
    //   : undefined;
    // this.getCookie();
  },
  mounted() {
    if (this.account && this.password) {
      this.loginForm.username = this.account;
      this.loginForm.password = base64.decode(this.password);
      this.isRemember = true;
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-icon-view {
  display: none !important;
}

::v-deep .custom-icon {
  width: 24px !important;
  height: 24px;
  margin-right: 10px;
  cursor: pointer;
  &.isHide {
    background: url("~@/assets/common/unview.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  &.isShow {
    background: url("~@/assets/common/eye.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
